<template>
  <page-frame>
    <div class="service-center">
      <div class="handle">
        <el-row :gutter="10">
          <!--<el-col :span="4">-->
            <div class="handleCell active quickAccess" @click="handleState(0)">
              <div class="cellIcon fRight"><img src="../../img/service01.png" alt=""></div>
              <div class="cellWords fLeft">
                <div class="wen">今日值班表</div>
              </div>
            </div>
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <div class="handleCell quickAccess" @click="handleState(1)">
              <div class="cellIcon fRight"><img src="../../img/service02.png" alt=""></div>
              <div class="cellWords fLeft">
                <div class="wen">价目表</div>
              </div>
            </div>
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <div class="handleCell quickAccess" @click="handleState(2)">
              <div class="cellIcon fRight"><img src="../../img/service03.png" alt=""></div>
              <div class="cellWords fLeft">
                <div class="wen">请假申请</div>
              </div>
            </div>
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <div class="handleCell quickAccess" @click="handleState(3)">
              <div class="cellIcon fRight"><img src="../../img/service04.png" alt=""></div>
              <div class="cellWords fLeft">
                <div class="wen">问题上报</div>
              </div>
            </div>
          <!--</el-col>-->
          <!--<el-col :span="5">-->
            <div class="handleCell quickAccess" @click="handleState(4)" style="margin-right:0!important;">
              <div class="cellIcon fRight"><img src="../../img/service05.png" alt=""></div>
              <div class="cellWords fLeft">
                <div class="wen">访客登记</div>
              </div>
            </div>
          <!--</el-col>-->
        </el-row>
      </div>

      <div class="handle quickScreening">
        <el-row :gutter="30">
          <span v-for="item in quickScreening">
            <el-col :span="6" v-if="item.infoName=='报警'">
              <div class="blockCell red" style="border-color:#337ab7;">
                <div class="handleCell red active">
                  <div class="cellIcon fLeft" style="width:70px!important;text-align: center">
                    <img src="../../img/alarm.png" alt="">
                    <div class="IconWord">报警</div>
                  </div>
                  <div class="cellWords fRight">
                    <div class="shu"><span>{{item.pendingCount}}</span><span> / {{item.totalCount}}</span></div>
                    <div class="wen"> <span @click="pending(1,1,1)">待处理</span> <span @click="pending(1,2,1)">已完成</span> </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" v-else-if="item.infoName=='投诉'">
              <div class="blockCell orange" style="border-color:#5cb85c;">
                <div class="handleCell orange active">
                  <div class="cellIcon fLeft" style="width:70px!important;text-align: center">
                    <img src="../../img/complaints.png" alt="">
                    <div class="IconWord">投诉</div>
                  </div>
                  <div class="cellWords fRight">
                    <div class="shu"><span>{{item.pendingCount}}</span><span> / {{item.totalCount}}</span></div>
                    <div class="wen"><span @click="pending(2,1,1)">待处理</span> <span @click="pending(2,2,1)">已完成</span> </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" v-else-if="item.infoName=='问题上报'">
              <div class="blockCell blue" style="border-color:#f0ad4e;">
                <div class="handleCell blue">
                  <div class="cellIcon fLeft" style="width:70px!important;text-align: center">
                    <img src="../../img/problemReport.png" alt="">
                    <div class="IconWord">问题上报</div>
                  </div>
                  <div class="cellWords fRight">
                    <div class="shu"><span>{{item.pendingCount}}</span><span> / {{item.totalCount}}</span></div>
                    <div class="wen"><span @click="pending(3,1,1)">待处理</span> <span @click="pending(3,2,1)">已完成</span> </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" v-else="item.infoName=='外出请假'">
              <div class="blockCell green" style="border-color:#d9534f;">
                <div class="handleCell green">
                  <div class="cellIcon fLeft" style="width:70px!important;text-align: center">
                    <img src="../../img/askForLeave.png" alt="">
                    <div class="IconWord">外出请假</div>
                  </div>
                  <div class="cellWords fRight">
                    <div class="shu"><span>{{item.pendingCount}}</span><span> / {{item.totalCount}}</span></div>
                    <div class="wen"><span @click="pending(4,1,1)">待返院</span> <span @click="pending(4,2,1)">已完成</span> </div>
                  </div>
                </div>
              </div>
            </el-col>
          </span>
        </el-row>
      </div>

      <!--待处理/待返院-->
      <div class="centre-bottom" v-if="paddingStatus">
        <div class="cardTitle"><span>{{typeName}}</span></div>
        <el-card class="box-card">
          <el-row class="text item"  v-for="data in approvalTableData">
            <el-col :span="3" class="text-main"><span v-text="data.memberInfo"></span></el-col>
            <el-col :span="10" class="text-main"><span>{{data.typeName}}  |  <span style="color:indianred">{{data.typeTitle}}</span></span></el-col>
            <el-col :span="9" class="text-main">
              <span>
                <span v-show="currentTypeId=='1'&&currentStatus=='1'">{{data.continueTimes}}  |  </span>
                <span v-show="currentTypeId=='4'">{{data.eBackTime}}  |  </span>
                {{data.typeDate}}
              </span>
            </el-col>
            <el-col :span="1" class="text-main" v-show="data.typeName!='出入登记'"><el-button size="small"  type="info" @click="handle(data)">处理</el-button></el-col>
            <el-col :span="1" class="text-main" v-show="data.typeName=='出入登记'"><el-button size="small"  type="info" @click="backNursingHome(data)">返院</el-button></el-col>
          </el-row>
        </el-card>
      </div>

      <!--已完成-->
      <div class="centre-bottom" style="margin-top:10px;" v-if="completeStatus">
        <div class="cardTitle">已完成</div>
        <el-card class="box-card">
          <el-row class="text item"  v-for="data in completeData">
            <el-col :span="3" class="text-main"><span v-text="data.memberInfo"></span></el-col>
            <el-col :span="10" class="text-main"><span>{{data.typeName}}  |  <span style="color:indianred" v-html="data.typeTitle" class="filterWord">{{data.typeTitle|filterPic}}</span></span></el-col>
            <el-col :span="9" class="text-main"><span><span v-show="currentTypeId=='4'&&currentStatus=='2'">{{data.backTime}}  |  </span>{{data.typeDate}}</span></el-col>
            <el-col :span="1" class="text-main" v-show="true"><el-button size="small"  type="info" @click="detail(data)">详情</el-button></el-col>
          </el-row>
        </el-card>

      </div>
      <!--paging-->
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="5"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
      <!--报警记录-->
      <el-dialog title="报警记录" :visible.sync="alarmRecord" size="tiny" :close-on-click-modal="false">
        <el-form :model="recordForm" ref="recordForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="描述" prop="desc">
            <el-col :span="20">
              <el-input
                type="textarea"
                resize="none"
                v-model="recordForm.desc"
                placeholder="请输入记录内容"
                style="width:100%!important;"
              >
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="处理人" prop="handler">
            <el-col :span="20">
              <el-autocomplete
                v-model="responsible.empName"
                :fetch-suggestions="querySearchAsyncs"
                placeholder="请输入处理人"
                @select="responsibleSelect"
              >
              </el-autocomplete>
            </el-col>
          </el-form-item>
          <el-form-item label="是否已解决" prop="isSolved">
            <el-radio-group v-model="recordForm.isSolved">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="alarmRecord = false">取 消</el-button>
          <el-button type="primary" @click="submitRecord">确 定</el-button>
        </div>
      </el-dialog>

      <!--返院-->
      <el-dialog title="返院" :visible.sync="backHome" size="tiny" :close-on-click-modal="false">
        <el-form :model="backHomeForm" :rules="backHomeRules" ref="backHomeForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="离院时间" prop="currentMemCreateTime">
            <el-col :span="20">
              <el-date-picker
                v-model="backHomeForm.currentMemCreateTime"
                type="date"
                disabled
                placeholder="选择日期"
                >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="返院时间" prop="backTime">
            <el-col :span="20">
              <el-date-picker
                v-model="backHomeForm.backTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="陪同家属姓名">
            <el-col :span="20">
              <el-input disabled v-model="backHomeForm.currentMemeEscort"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="家属联系方式">
            <el-col :span="20">
              <el-input disabled v-model="backHomeForm.currentMemSibPhone"></el-input>
            </el-col>
          </el-form-item>
          <!--<el-form-item label="确认返院">-->
            <!--<el-switch on-text="on" off-text="off" v-model="backHomeForm.isBack"></el-switch>-->
          <!--</el-form-item>-->
          <p style="text-align: center;font-weight:bold">请确认该会员已经返回养老院</p>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="backHome = false">取 消</el-button>
          <el-button type="primary" @click="confirmContacts">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>
<script>
  import serviceCenterApi from '../../service/serCenter/serviceCenterApi';
  import commonApi from '../../service/member/commonApi';
  import bedGuardApi from '../../service/healthManagement/bedGuardApi'
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  import commonJs from '../../config/common'
  export default {
    data() {
      var checkRecorder = (rule, value, callback) => {
        if (this.recordForm.responsible.empName=='') {
          return callback(new Error('记录人不能为空'));
        }else{
          callback();
        }
      };

      return {
        typeName:'待处理',
        currentTypeId:null,
        currentStatus:null,
        currentRecordId:null,
        paddingStatus:false,
        completeStatus:false,
        responsible:{
          empName: "",
        },
        quickScreening:[],
        alarmRecord:false,
        backHome:false,
        memberApplyCount:{
          haveIn: "",
          inFinsh: "" ,
          pendingAudit: "",
          pendingMoney: "",
        },
        approvalTableData:[],
        completeData:[],
        recordForm:{
          desc:'',
          handleEmId: null,
          isSolved: null,
          recordId: null
        },
        backHomeForm:{
          "backTime": "",
          "entryId": 0,
          "isUrgent":true,
          "currentMemCreateTime":"",
          "currentMemSibPhone":"",
          "currentMemeEscort":"",
        },
        rules:{
          desc:[
            { required: true, message: '请输入记录内容', trigger: 'blur' },
          ],
          empName:[
            {required:true, validator: checkRecorder, trigger: 'change' },
          ],
          isSolved:[
            {type:'number', required: true, message: '请选择是否已解决', trigger: 'change' },
          ]
        },
        backHomeRules:{

        },
        currentPage:1,
        total:0,
        emps:[],
      }
    },
    methods: {
      init(){
        this.getCurrentOrgServiceCentreInfo();
        this.pending(2,1,1);//默认初始化的是投诉待处理
        this.getAllEmployee();
      },

      /**
       * quick filter panel data(四个panel面板的count数据)
       */
      getCurrentOrgServiceCentreInfo(){
        let self = this;
        serviceCenterApi.getServiceCentreInfo().then(
          (res)=>{
            self.quickScreening = res.data.data;
            if(self.quickScreening.length==0){
              self.quickScreening = [{
                infoName : '报警',
                pendingCount : 0,
                totalCount : 0
              },{
                infoName : '投诉',
                pendingCount : 0,
                totalCount : 0
              },{
                infoName : '问题上报',
                pendingCount : 0,
                totalCount : 0
              },{
                infoName : '外出请假',
                pendingCount : 0,
                totalCount : 0
              }]
            }
          }
        );
      },

      /**
       * pending/complete
       */
      pending(typeId,status,pageNum){
        let self = this;
        if(typeId==4){
          self.typeName = '待返院';
        }else{
          self.typeName = '待处理';
        }
        self.currentStatus = status;
        self.currentTypeId = typeId;
        if(status!=2){//待处理
          self.paddingStatus = true;
          self.completeStatus = false;
          serviceCenterApi.getServiceCentreInfoStatusList(typeId,status,5,pageNum).then(
            (res)=>{
              self.approvalTableData = res.data.data.list;
              self.total = res.data.data.total;
              if(typeId==4){//外出请假
                for(var i=0;i<self.approvalTableData.length;i++){
                  self.approvalTableData[i].eBackTime = self.approvalTableData[i].eBackTime.substring(0,17);
                }
              }
              for(var i=0;i<self.approvalTableData.length;i++){
                self.approvalTableData[i].typeDate = self.approvalTableData[i].typeDate.substring(0,21);
              }
            }
          );
        }else if(status==2){//已完成
          self.paddingStatus = false;
          self.completeStatus = true;

          serviceCenterApi.getServiceCentreInfoStatusList(typeId,status,5,pageNum).then(
            (res)=>{
              self.completeData = res.data.data.list;
              self.total = res.data.data.total;
              if(typeId==4){//外出请假
                for(var i=0;i<self.completeData.length;i++){
                  self.completeData[i].backTime = self.completeData[i].backTime.substring(0,17);
                }
              }
              for(var i=0;i<self.completeData.length;i++){
                self.completeData[i].typeDate = self.completeData[i].typeDate.substring(0,21);
              }
            }
          );
        }
      },

      alarm(){
        this.alarmRecord = true;
      },
      /**
       * 在床报警 离床报警 设备故障 投诉
       */
      handle(val){
        this.currentRecordId = val.recordId;
        if(this.currentTypeId==1){//报警的待处理
          this.alarm();
        }else if(this.currentTypeId==2||this.currentTypeId==3){//投诉/问题上报 待处理
          //跳转至:问题上报 - 记录
          this.$router.push({name: 'consultingFollowComplaint',params:{status:0,woId:this.currentRecordId}});
        }
      },
      /**
       * 返院
       */
      backNursingHome(val){
        this.backHome = true;
        this.backHomeForm.currentMemCreateTime = val.typeDate.substring(4);
        this.backHomeForm.currentMemeEscort = val.escort;
        this.backHomeForm.currentMemSibPhone = val.sibPhone;
      },

      /**
       * confirmContacts
       */
      confirmContacts(){
        let self = this;
        self.backHomeForm.entryId = self.currentRecordId;
        self.backHomeForm.backTime = commonJs.formatDate( self.backHomeForm.backTime);
        outRegistrationApi.entryBack(self.backHomeForm).then(function (response) {
          self.pending(self.currentTypeId,self.currentStatus,1);
          self.$message({
            message: '返院登记成功',
            type: 'success'
          });
          self.backHome = false;
        },function () {
          self.$message({
            message: '返院登记失败',
            type: 'warning'
          });
        })
      },

      /**
       *submit record
       */
      submitRecord(){
        let self = this;
        self.recordForm.recordId = self.currentRecordId;
        bedGuardApi.saveAlarmRecord(self.recordForm).then(
          (response)=>{
            self.alarmRecord = false;
            self.$message({
              message:'添加记录成功',
              type:'success'
            });
            //刷新数据
            self.padding(self.currentTypeId,1);
          }
        );
      },
      /**
       * 详情
       */
      detail(val){
        this.currentRecordId = val.recordId;
        if(this.currentTypeId==1){
          //跳转至:报警记录 - 详情
          this.$router.push({name:'alarmRecordDetail',params:{recordId:this.currentRecordId}});
        }else if(this.currentTypeId==2||this.currentTypeId==3){
          //跳转至:问题上报 - 记录
          this.$router.push({name:'consultingDetail',params:{woId:this.currentRecordId}});
        }else if(this.currentTypeId==4){
          this.$router.push({name: 'inAndOutNewRegistration',params:{entryId:this.currentRecordId}});
        }
      },
      /**
       *快速入口
       */
      handleState(status){
        //0今日值班表，1价目表 2请假 3上报问题 4访客登记
        let self = this;
        if(status==0){
          self.$router.push({name:'dutyTable'});
        }else if(status==1){
          self.$router.push({name:'priceTable'});
        }else if(status==2){
          self.$router.push({name:'inAndOutNewRegistration',params:{entryId:0}});
        }else if(status==3){
          self.$router.push({name: 'consultingNewComplaint',params:{way:1,row:{}}});
        }else if(status==4){
          self.$router.push({name: 'visterRegistration',params:{way:1,row:{}}});
        }

      },
      /**
       * 分页相关函数
       */
      handleSizeChange(val) {
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        this.pending(this.currentTypeId,this.currentStatus,this.currentPage);
      },
      /**
       * 筛选指派责任人(三个相关的函数)
       */
      querySearchAsyncs(queryString, cb) {
        var emps = this.emps;
        var results = queryString ? emps.filter(this.createStateFilters(queryString)) : emps;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilters(queryString) {
        return (state) => {
          return (state.empName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      responsibleSelect(item){
        this.recordForm.handleEmId = item.emId;
      },
      getAllEmployee(){
        let self = this;
        consultingComplaintApi.getAllStaff(self.responsible).then(
          (response)=>{
            self.emps = response.body.data;
            for(var i=0;i<self.emps.length;i++){
              var emp = self.emps[i];
              emp.value = emp.emName;
            };
          }
        );
      },
    },
    mounted: function () {
      this.init();
    },
    filters: {
      filterPic: function (value) {
        if (!value) return '';
        value = value.toString();
        return value.replace(/<img.*\/>/ig, "");
      }
    }
//    beforeMount:function () {
//      this.init();
//    },


  }
</script>

<style>
  .service-center .centre-bottom .item.text {
    border-bottom:1px solid #ccc;
    font-size: 14px;
    padding: 10px 15px;
  }
  .service-center .centre-bottom .item.text .text-main{
    margin-top: 5px;
  }
  .service-center .centre-bottom .item.text:hover {
    background-color: #E5E9F2;
  }
  .service-center .handle{
    margin-bottom: 30px;
  }
  .service-center .handle .blockCell{
    height: 117px;
    /*border:1px solid #ccc;*/
    border-radius: 5px;
  }
  .service-center .handle .blockCell.blue:hover{
    box-shadow: 0px 0px 5px #337ab7;
  }
  .service-center .handle .blockCell.green:hover{
    box-shadow: 0px 0px 5px #5cb85c;
  }
  .service-center .handle .blockCell.orange:hover{
    box-shadow: 0px 0px 5px #f0ad4e;
  }
  .service-center .handle .blockCell.red:hover{
    box-shadow: 0px 0px 5px #d9534f;
  }
  .service-center .handle .blockCell .pending{
    line-height: 20px
  }
  .service-center .handle .blockCell .pending .textCenter{
    cursor: pointer;
    color: #949393;
  }
  .service-center .handle .handleCell{
    width: 100%;
    height: 117px;
    border-radius: 4px;
    /*border-top-left-radius: 4px;*/
    overflow: hidden;
    padding: 20px 15px 20px 20px;
    background-color: #0cb7c6;
  }
  .service-center .handle .handleCell.blue{
    border-color:#337ab7;
    background-color:#337ab7;
  }
  .service-center .handle .handleCell.green{
    border-color:#5cb85c;
    background-color:#5cb85c;
  }
  .service-center .handle .handleCell.orange{
    border-color:#f0ad4e;
    background-color:#f0ad4e;
  }
  .service-center .handle .handleCell.red{
    border-color:#d9534f;
    background-color:#d9534f;
  }
  .service-center .handle .handleCell .cellIcon{
   margin-right: 10px;

  }
  .service-center .handle .handleCell .cellWords{
    color: #ffffff;
  }
  .service-center .handle .handleCell .cellWords .shu{
    font-size: 38px;
    line-height: 38px;
  }
  .service-center .handle .handleCell .cellWords .wen{
    font-size: 16px;
    text-align: right;
    text-align: left;
    line-height: 72px;
  }
  .service-center .handle .handleCell .cellWords .wen span{
    margin-right:10px;
  }
  .service-center .handle .handleCell .cellIcon .IconWord{
    width:70px;
    text-align: center;
    color:#fff;
    font-size:16px;
  }
  .service-center .cardTitle{
    color:dodgerblue;
    font-size:16px;
    margin-bottom:10px;
  }
  .service-center .handleCell.quickAccess{
    width:19%;
    float:left;
    margin-right:1%;
    cursor: pointer;
  }
  .service-center .quickScreening .wen span{
    cursor:pointer;
  }
  .service-center .el-autocomplete{
    width:100%;
  }
  .service-center .filterWord p{
    display:inline-block;
  }
</style>
